<script setup>
import { ref } from 'vue'
import { textEncryptService } from '@/api/tools'
import { useRouter } from 'vue-router'
const router = useRouter()
// 加密
const inputPlaintext = ref('') // 输入框明文
const cipherText = ref('') // 显示密文

const onEncrypt = async () => {
  cipherText.value = ''
  const text = await textEncryptService(inputPlaintext.value)
  cipherText.value = text.data.data.Message
}

// 解密
const inputCipherText = ref('') // 输入框密文
const plaintext = ref('') // 显示明文

const decode = async () => {
  plaintext.value = ''
  const text = await textEncryptService(inputCipherText.value, 1)
  plaintext.value = text.data.data.Message
}

// 复制
function copyToClipboard(text) {
  const input = document.createElement('input')
  input.setAttribute('value', text)
  document.body.appendChild(input)
  input.select()
  document.execCommand('copy')
  document.body.removeChild(input)
  showToast('已复制')
}
const toQQ = (text) => {
  copyToClipboard(text)
  plus.runtime.launchApplication(
    { pname: 'com.tencent.mobileqq' },
    function (e) {
      alert('Open system default browser failed: ' + e.message)
    }
  )
}
const toWeChat = (text) => {
  copyToClipboard(text)
  plus.runtime.launchApplication({ pname: 'com.tencent.mm' }, function (e) {
    alert('Open system default browser failed: ' + e.message)
  })
}
</script>

<template>
  <div class="tool-box-sho-u">
    <div class="tool-box-sho-u-header">
      <van-nav-bar
        fixed
        :placeholder="true"
        title="兽语加密"
        left-arrow
        @click-left="router.go(-1)"
      />
    </div>
    <div class="tool-box-sho-u-content">
      <div class="van-hairline--bottom" style="height: 300px">
        <van-form @submit="onEncrypt">
          <van-cell-group title="加密" inset>
            <van-field
              v-model="inputPlaintext"
              rows="2"
              autosize
              label="加密文本"
              type="textarea"
              maxlength="200"
              placeholder="请输入内容"
              show-word-limit
              :clearable="true"
              clear-trigger="always"
              :rules="[{ required: true, message: '请输入内容' }]"
            >
              <template #extra>
                <!-- <div style="margin-bottom: 5px">加密文本</div> -->
                <van-button
                  native-type="submit"
                  plain
                  size="small"
                  type="primary"
                  style="margin-left: 12px"
                >
                  加密
                </van-button>
              </template>
            </van-field>
          </van-cell-group>
        </van-form>
        <div style="width: 90%; margin: 10px auto">
          密文：
          <van-text-ellipsis
            rows="3"
            :content="cipherText"
            expand-text="展开"
            collapse-text="收起"
          />
        </div>
        <!-- style="width: 90%; margin: 10px auto" -->
        <!-- @click="onEncrypt()" -->
        <div class="tool-box-sho-u-content-button">
          <van-button
            @click="copyToClipboard(cipherText)"
            plain
            size="small"
            type="primary"
          >
            复制
          </van-button>
          <van-button
            @click="toQQ(cipherText)"
            plain
            size="small"
            type="primary"
          >
            复制到QQ
          </van-button>
          <van-button
            @click="toWeChat(cipherText)"
            plain
            size="small"
            type="primary"
          >
            复制到微信
          </van-button>
        </div>
        <!-- <van-button round block type="primary">加密 </van-button> -->
      </div>
      <van-form @submit="decode">
        <van-cell-group title="解密" inset>
          <van-field
            v-model="inputCipherText"
            rows="2"
            autosize
            label="解密文本"
            type="textarea"
            maxlength="200"
            placeholder="请输入内容"
            show-word-limit
            :clearable="true"
            clear-trigger="always"
            :rules="[{ required: true, message: '请输入内容' }]"
          >
            <template #extra>
              <!-- <div style="margin-bottom: 5px">加密文本</div> -->
              <van-button
                native-type="submit"
                plain
                size="small"
                type="primary"
                style="margin-left: 12px"
                >解密</van-button
              >
              <!-- @click="plaintext = inputPlaintext" -->
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
      <div style="width: 90%; margin: 10px auto">
        明文：
        <van-text-ellipsis
          rows="3"
          :content="plaintext"
          expand-text="展开"
          collapse-text="收起"
        />
      </div>
      <div class="tool-box-sho-u-content-button">
        <van-button
          @click="copyToClipboard(plaintext)"
          plain
          size="small"
          type="primary"
        >
          复制
        </van-button>
        <van-button @click="toQQ(plaintext)" plain size="small" type="primary">
          复制到QQ
        </van-button>
        <van-button
          @click="toWeChat(plaintext)"
          plain
          size="small"
          type="primary"
        >
          复制到微信
        </van-button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.tool-box-sho-u-content-button {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 10px auto;
}
</style>
